<template>
	<view class="goal-wrapper">
		<view class="goal-card">
			<view class="goal-info-box">
				<view class="user-info-wrapper">
					<view class="user-box" @click.stop="handleToUserCenter">
						<view class="user-avatar">
							<u-avatar size="80" mode="square" :src="userSignRecord.avatarUrl"></u-avatar>
						</view>
						<view class="user-info">
							<view class="user-name">{{ userSignRecord.nickName }}</view>
						</view>
					</view>
					<view v-if="userSignRecord.signAddress" class="location">
						<u-icon name="map-fill" :custom-style="{color:'#31bff7'}"></u-icon>
						<view class="location-text">{{ userSignRecord.signAddress }}</view>
					</view>
				</view>
				<view class="goal-container-box">
					<text class="goal-text">
						{{ userSignRecord.signWord }}
					</text>
				</view>
				<view v-if="coverImg" @tap.stop>
					<u-image @click="handleExamineImage($event)" width="100%" :src="coverImg" mode="widthFix" shape="square">
					</u-image>
				</view>
			</view>

			<view>
				<view class="release-time">
					<view class="like">
						<view class="followed" style="position: relative;" @click.stop="handleLike">
							<u-icon :class="userSignRecord.userClick ? 'heart-fill' : 'heart'" :name="userSignRecord.userClick ? 'heart-fill' : 'heart'"
							 size="40"></u-icon>
						</view>
						<view class="like-num">{{userSignRecord.totalClickCount ? userSignRecord.totalClickCount : '点赞'}}</view>
						<!-- <view v-if="userSignRecord.goalName" class="iconfont icon-daqia clocked-in">
							<text class="clocked-in-text">已打卡</text>
						</view> -->
						<view class="mode" @click="showPopup=true">
							<u-icon size="50" name="more-dot-fill"></u-icon>
						</view>
					</view>
					<view class="time">{{ userSignRecord.createTime | timeStamp}}</view>
				</view>
			</view>

			<!-- 信息是打卡就显示该元素 -->
			<view v-if="userSignRecord.goalName" class="clocked-in-tip-wrapper" @click="handleToReleaseList">
				<u-image class="clocked-in-image" width="125rpx" height="117rpx" mode="aspectFit" :src="clockedInImg"></u-image>
				<view class="clocked-in-name-info">
					<view class="clocken-goalName">{{ userSignRecord.goalName }}</view>
					<view class="goal-tiem"> {{ userSignRecord.createTime | getDate}} 至 {{ userSignRecord.createTime | oneMonthLater}}
					</view>
				</view>
				<view class="clocked-in-success">
					<image class="clocked-in-success-image" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/6ab3ef80-e1b8-11e9-83c4-692d6d1aaad6.png"></image>
					<image class="decoration decoration1" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/56ca23a0-e1bc-11e9-a3ed-05b4249b2ee6.png"></image>
					<image class="decoration decoration2" src="https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/27cda2c0-e1bc-11e9-a30a-41900ee53442.png"></image>
					<view class="clocked-in-success-text">
						打卡成功！
					</view>
				</view>
			</view>
		</view>

		<!-- 举报弹窗 -->
		<u-popup mode="bottom" v-model="showPopup">
			<view class="popup">
				<view class="popup-bottom" v-if="userSignRecord.openId !== user.openId" shape="square" @click="showPopup=false">
					<navigator class="navigator" :url="`/pages/insidePages/report/index?userSignRecordId=${userSignRecord.userSignRecordId}`">
						举 报
					</navigator>
				</view>
				<view class="popup-bottom" v-else shape="square" @click="handleDelUserSignRecord">删 除</view>
			</view>
		</u-popup>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		parseTime
	} from '@/utils/index.js'
	import {
		signRecordDetail
	} from '@/api/home.js'
	import {
		concern
	} from '@/api/user.js'
	import {
		clickLike,
		delUserSignRecord
	} from '@/api/goal.js'
	import loginMixin from '@/utils/loginMixin.js'

	export default {
		mixins: [loginMixin],

		data() {
			return {
				defaultAvatar: require('@/static/user/default-avatar.png'),
				showPopup: false, // 显示举报弹窗
				showLoginDialog: false, // 显示登陆弹窗
				userSignRecordId: null,
				userSignRecord: {} // 打卡详情
			}
		},

		onLoad(options) {
			this.userSignRecordId = options.userSignRecordId
			this.init()
		},

		computed: {
			coverImg() {
				return this.userSignRecord.signPic ? JSON.parse(this.userSignRecord.signPic)[0] : ''
			},

			clockedInImg() {
				console.log()
				return this.userSignRecord.goalName ?
					`https://mini.chi1jing.com/file/common/${this.userSignRecord.goalName}的副本.png` : ''
			}
		},

		methods: {
			
			init() {
				this.handleSignRecordDetail()
			},

			// 跳转个人中心
			handleToUserCenter() {

				// 点击的是自己的信息跳转个人中心
				if (this.user.openId === this.userSignRecord.openId) {
					uni.switchTab({
						url: '/pages/mine/index'
					})
				} else {
					uni.navigateTo({
						url: `/pages/insidePages/userCenter/index?openId=${this.userSignRecord.openId}&nickName=${this.userSignRecord.nickName}&avatarUrl=${this.userSignRecord.avatarUrl}&userConcern=${this.userSignRecord.userConcern}`
					})
				}

			},

			// 获取详情
			async handleSignRecordDetail() {
				const data = JSON.stringify({
					userSignRecordId: this.userSignRecordId,
					openId: this.user.openId || ''
				})
				try {
					uni.showLoading({
					    title: '加载中'
					});
					const {
						resultData
					} = await signRecordDetail({
						data
					})
					this.userSignRecord = resultData.userSignRecord
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			},

			// 查看图片
			handleExamineImage() {
				const imgList = this.userSignRecord.signPic ? JSON.parse(this.userSignRecord.signPic) : ''
				uni.previewImage({
					indicator: 'none',
					urls: imgList
				})
			},

			/**
			 * 点赞
			 * 1. 检查是否已经登录
			 */
			async handleLike() {
				if (!this.user.hasOwnProperty('openId')) {
					this.showLoginDialog = true
					return
				}
				try {
					const data = JSON.stringify({
						openId: this.user.openId,
						userSignRecordId: this.userSignRecord.userSignRecordId
					})
					const res = await clickLike({
						data
					})
					this.handleSignRecordDetail()

				} catch (e) {
					//TODO handle the exception
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			},

			// 删除
			handleDelUserSignRecord() {
				uni.showModal({
					title: '确认删除吗？',
					showCancel: true,
					success: async (res) => {
						if (!res.confirm) return
						const data = JSON.stringify({
							openId: this.userSignRecord.openId,
							userSignRecordId: this.userSignRecord.userSignRecordId
						})
						try {
							const {
								resultMsg
							} = await delUserSignRecord({
								data
							})
							uni.showToast({
							    title: resultMsg,
							    duration: 2000,
								icon: 'none'
							})
							// const pages = getCurrentPages()
							// const beforePage = pages[pages - 2]
							// beforePage.$vm.submitAct()
							uni.reLaunch({
								url: '/pages/home/index'
							})
						} catch (e) {
						}
					}
				})
			},
			
			// 跳转目标发布列表
			handleToReleaseList() {
				console.log(this.userSignRecord)
				const openId = this.userSignRecord.openId
				const userDonateId = this.userSignRecord.userDonateId
				uni.navigateTo({
					url:`/pages/goal/goalList?openId=${openId}&userDonateId=${userDonateId}`
				})
			}
		},

		filters: {
			timeStamp(value) {
				if (!value) return ''
				return parseTime(value)
			},

			getDate(value) {
				const date = new Date(value)
				const month = date.getMonth() + 1 > 12 ? '01' : date.getMonth() + 1 > 9 ? date.getMonth() + 1 :
					`0${date.getMonth() + 1}`
				const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
				return month + '-' + day
			},

			oneMonthLater(value) {
				const date = new Date(value)
				const month = date.getMonth() + 2 > 12 ? '01' : date.getMonth() + 2 > 9 ? date.getMonth() + 2 :
					`0${date.getMonth() + 2}`
				const day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`
				return month + '-' + day
			}
		}
	}
</script>

<style lang="scss">
	.goal-wrapper {
		margin-bottom: 40rpx;
	}

	.goal-card {
		margin: 0 auto;
		padding: 0 40rpx;
	}

	// 用户头像、名称、时间
	.goal-info-box {
		margin-top: 32rpx;
		margin-bottom: 16rpx;
	}

	.user-info-wrapper {
		display: flex;
		justify-content: space-between;
	}

	.user-box {
		display: flex;
		margin-bottom: 24rpx;
	}

	.location {
		width: 300rpx;
		text-align: right;

		.location-text {
			text-align: right;
			font-size: 24rpx;
		}
	}

	.user-avatar {
		margin-right: 16rpx;
	}

	.user-info {
		// flex-grow: 1;
		color: #434343;
	}

	.user-info .user-name {
		margin-bottom: 8rpx;
		font-size: 28rpx;
	}

	.release-time {
		display: flex;
		justify-content: space-between;
	}

	.release-time .time {
		flex-shrink: 0;
		color: #a5a5a5;
		font-size: 24rpx;
	}

	.release-time .like {
		display: flex;
		align-items: center;
	}

	.release-time .like .like-num {
		margin-right: 24rpx;
		font-size: 28rpx;
	}
	
	.release-time .like .clocked-in {
		margin-right: 24rpx;
	}
	
	.release-time .like .clocked-in .clocked-in-text {
		padding-left: 5px;
		font-size: 24rpx;
	}

	.release-time .like .heart {
		margin-right: 8rpx;
	}

	.release-time .like .heart-fill {
		color: #e6716a;
	}

	.release-time .like .active {
		color: #3399ff;
	}
	
	.release-time .like .mode {
		margin-left: 24rpx;
	}

	// 动态信息
	.goal-container-box {
		padding-bottom: 24rpx;
	}

	.goal-container-box .goal-text {
		font-size: 28rpx;
	}

	.popup {
		padding: 82rpx 75rpx;
		background-color: #000000;
		box-sizing: border-box;
	}
	
	.popup-bottom {
		background-color: #fff;
		padding: 20rpx 0;
		border-radius: 8rpx;
		text-align: center;
		font-size: 40rpx;
		box-sizing: border-box;
	}

	.followed {
		margin-right: 8rpx;
	}

	.navigator {
		display: block;
		width: 100%;
		outline: none;
	}

	.clocked-in-tip-wrapper {
		overflow: hidden;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 156rpx;
		margin-top: 28rpx;
		border-radius: 20rpx;
		padding: 24rpx;
		background-image: url("https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/68cfb110-e1b6-11e9-8126-4dc7af777e1f.png");
		background-size: contain;
		box-sizing: border-box;

		.clocked-in-image {
			// margin-top: 14rpx;
		}

		.clocked-in-name-info {
			color: #fff;
			font-size: 40rpx;

			.goal-tiem {
				font-size: 26rpx;
			}
		}

		.clocked-in-success {
			position: relative;
			text-align: center;
			font-size: 50rpx;
			color: #fff;

			.clocked-in-success-image {
				width: 64rpx;
				height: 64rpx;
				margin: auto;
			}
			
			.decoration {
				position: absolute;
				top: 4rpx;
				right: 65rpx;
			}
			.decoration1{
				width: 10rpx;
				height: 10rpx;
			}
			.decoration2 {
				top: 31rpx;
				right: 55rpx;
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
	
	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
